<template>
  <div class="container">
    <div class="header">
      <span>申请列表</span>
      <el-select
        @change="getList"
        v-model="status"
        class="m-2"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item in statusOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <el-table
      :data="applyList"
      style="width: 100%"
      v-loading="loading"
      element-loading-background="rgba(122,122,122,0.7)"
    >
      <el-table-column prop="name" label="艺人姓名" />
      <el-table-column label="艺人照片">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="baseUrl + scope.row.image"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="身份证照片">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 75px; margin-right: 20px"
            :src="baseUrl + scope.row.idCard[0]"
          ></el-image>
          <el-image
            style="width: 100px; height: 75px"
            :src="baseUrl + scope.row.idCard[1]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="申请日期" />
      <el-table-column label="申请状态">
        <template #default="scope">
          <span>{{ statusFilter(scope.row.status) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :hide-on-single-page="pageCount != 1"
      layout="prev, pager, next"
      :page-count="pageCount"
      @current-change="changePage"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { applyIndex } from "@/http/api";
const baseUrl = import.meta.env.VITE_API_URL;
const applyList = ref([]);
const status = ref("");
const page = ref(1);
const pageCount = ref(0);
const loading = ref(false);

const statusOption = ref([
  {
    value: "",
    label: "全部",
  },
  {
    value: 0,
    label: "申请中",
  },
  {
    value: 1,
    label: "审核成功",
  },
  {
    value: 2,
    label: "审核失败",
  },
]);
onMounted(() => {
  getList();
});

const statusFilter = (e) => {
  const info = {
    0: "申请中",
    1: "审核成功",
    2: "审核失败",
  };
  return info[e];
};

const getList = async () => {
  loading.value = true;
  const { data } = await applyIndex({
    status: status.value,
    page: page.value,
    limit: 10,
  });
  applyList.value = data.apply.data.map((el) => {
    el.idCard = el.id_card.split(",");
    return el;
  });
  pageCount.value = data.apply.last_page;
  loading.value = false;
};

const changePage = (e) => {
  page.value = e;
  getList();
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
